<template>
  <div>
    <Card dis-hover>
      <p slot="title">
          <Icon type="social-chrome"></Icon>
          聚划算商品
      </p>
      <Form>
        <Row>
          <Col span="10">
            <FormItem>
              <Input placeholder="请输入商品名称:女装" @on-change="searchWord" v-model="keyword"></Input>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem>
                <Button type="primary" icon="trash-a" style="margin-left: 8px" @click.native="clearWord">取消</Button>
            </FormItem>
          </Col>
        </Row>
         <Row>
          <Col span="10">
            <FormItem>
              <Select v-model="categoryId">
                <Option v-for="(item,index) in categoryList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="10">
            <FormItem>
                <Button type="success" icon="plus-circled" style="margin-left: 8px" @click="insert">收录</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>

    <Card dis-hover>
      <Table :loading="loading" border ref="selection" :columns="columns4" :data="datas"></Table>
      <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="total" :current="page" @on-change="changePage"></Page>
          </div>
      </div>
    </Card>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "编号",
          key: "itemId",
          sortable: true
        },
        {
          title: "图片",
          key: "picUrlForWL",
          render: (h, params) => {
            const row = params.row;
            const img = row.picUrlForWL;
            return h("div", [
              h(
                "a",
                {
                  attrs: {
                    href: row.pcUrl,
                    target: "blank"
                  }
                },
                [
                  h("img", {
                    attrs: {
                      src: img
                    },
                    style: {
                      width: "40px",
                      height: "40px"
                    }
                  })
                ]
              )
            ]);
          }
        },
        {
          title: "名称",
          key: "title"
        },
        {
          title: "类别",
          key: "categoryName"
        },
        {
          title: "原价",
          key: "origPrice"
        },
        {
          title: "现价",
          key: "actPrice",
          sortable: true
        },
        {
          title: "卖点",
          key: "uspDescList",
          render: (h, params) => {
            const row = params.row;
            return h(
              "Poptip",
              {
                props: {
                  trigger: "hover",
                  title: row.uspDescList.length + "卖点",
                  placement: "bottom"
                }
              },
              [
                h("Tag", row.uspDescList.length),
                h(
                  "div",
                  {
                    slot: "content"
                  },
                  [
                    h(
                      "ul",
                      this.datas[params.index].uspDescList.map(item => {
                        return h(
                          "li",
                          {
                            style: {
                              padding: "4px"
                            }
                          },
                          item
                        );
                      })
                    )
                  ]
                )
              ]
            );
          }
        },
        {
          title: "时间",
          render: (h, params) => {
            const row = params.row;
            const onlineStartTime = row.onlineStartTime;
            const onlineEndTime = row.onlineEndTime;
            return h(
              "div",
              this.converttime(onlineStartTime) +
                " - " +
                this.converttime(onlineEndTime)
            );
          }
        }
      ],
      keyword: "",
      loading: true,
      datas: [],
      page: 1,
      pageSize: 8,
      total: 0,
      categoryId: 0,
      categoryList: [
        { value: "1", label: "女装" },
        { value: "2", label: "男装" },
        { value: "3", label: "母婴" },
        { value: "4", label: "美妆" },
        { value: "5", label: "鞋包配饰" },
        { value: "6", label: "美食" },
        { value: "7", label: "数码家电" },
        { value: "8", label: "内衣" },
        { value: "9", label: "运动户外" },
        { value: "10", label: "家居家装" }
      ]
    };
  },
  mounted() {
    this.getdatas(this.keyword, 1);
  },
  methods: {
    getdatas(keyword, page) {
      this.loading = true;
      var that = this;
      axios
        .post("http://localhost:1234/tbk/jhs", {
          currentPage: page,
          pageSize: this.pageSize,
          word: keyword
        })
        .then(function(response) {
          that.loading = false;
          if (
            response.data.msgcode == 200 &&
            response.data.result.modelList != null
          ) {
            that.page = page;
            that.datas = response.data.result.modelList;
            that.total = response.data.result.totalPage;
          } else {
            that.page = 1;
            that.datas.splice(0, that.pageSize);
            that.total = 0;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    searchWord(word) {
      this.page = 1;
      this.getdatas(this.keyword, this.page);
    },
    clearWord() {
      this.keyword = "";
      this.page = 1;
      this.getdatas(this.keyword, this.page);
      debugger;
    },
    handleSelectAll(status) {
      this.$refs.selection.selectAll(status);
    },
    changePage(page) {
      this.getdatas(this.keyword, page);
    },
    converttime(times) {
      var date = new Date(times);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      // return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      return y + "-" + m + "-" + d;
    },
    ok() {
      this.$Message.info("点击了确定");
    },
    cancel() {
      //this.$Message.info("点击了取消");
    },
    insert() {
      var chooseDatas = this.$refs.selection.getSelection(true);
      chooseDatas.forEach(function(element) {
        element.category = {
          categoryid: this.categoryId
        };
      }, this);
      this.loading = true;
      var that = this;
      axios
        .post("http://localhost:1234/jhs/more", chooseDatas)
        .then(function(response) {
          that.loading = false;
          debugger;
        })
        .catch(function(error) {
          debugger;
          console.log(error);
        });
    }
  }
};
</script>

<style scoped>
.ivu-card {
  background: #fff;
  border-radius: 0;
  font-size: 14px;
  position: relative;
  transition: all 0.2s ease-in-out;
}
</style>



